<template>
  <transition name="toast-fade">
    <div class="toast" v-show="visible" :class="[ `toast-${position}` ]">
      <div class="toast-content">
        <i :class="[ `toast-content-icon`, `${iconClassName}` ]"
           v-if="iconClassName === '' ? false : true"></i>{{ message }}
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Toast',
    props: {
      message: {
        default: ''
      },
      position: {
        type: String,
        default: 'middle'
      },
      iconClassName: {
        default: ''
      }
    },
    data() {
      return {
        visible: false
      }
    }
  }
</script>
<style scoped>
  .toast-fade-leave-active {
    opacity: 0;
  }
  .toast {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    text-align: center;
    z-index: 5001;
    max-width: 60%;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    padding: 0.12rem;
    border-radius: 0.1rem;
    transition: opacity .3s linear;
    font-size: 18px;
  }
  .toast-top {
    top: 5%;
  }
  .toast-middle {
    top: 45%;
  }
  .toast-bottom {
    top: 95%;
  }

</style>
